<template>
  <div id="indexBanner">
    <swiper
      :cssMode="true"
      :mousewheel="true"
      :keyboard="true"
      :slidesPerView="1"
      :centeredSlides="true"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false
      }"
      :loop="true"
      :pagination="{
        clickable: true,
        dynamicBullets: true
      }"
      :navigation="true"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide v-for="item in indexBannerPage" :key="item.id"
        ><router-link
          to=""
          class="v-image__image v-image__image--contain"
          v-bind:style="{
            backgroundImage: 'url(' + item.img + ')'
          }"
          style="background-position: center center"
        >
        </router-link
      ></swiper-slide>
      <!-- 首页导航 -->
      <div class="d-flex justify-center app-banner-container">
        <div class="container">
          <div class="menu-wrap" style="width: 980px">
            <!-- 导航栏 -->
            <div class="side-menu">
              <ul class="side-menu-scroll">
                <li class="side-menu-item">
                  <div class="d-flex align-center menu-content">
                    <span class="text">热门推荐</span>
                  </div>
                  <img src="@/assets/images/首页导航右箭头.svg" alt="" />
                </li>
                <li class="side-menu-item">
                  <div class="d-flex align-center menu-content">
                    <span class="text">热门推荐</span>
                  </div>
                  <img src="@/assets/images/首页导航右箭头.svg" alt="" />
                </li>
                <li class="side-menu-item">
                  <div class="d-flex align-center menu-content">
                    <span class="text">热门推荐</span>
                  </div>
                  <img src="@/assets/images/首页导航右箭头.svg" alt="" />
                </li>
              </ul>
            </div>
            <!-- 导航展示栏 -->
            <div class="menu-panel">
              <div class="menu-panel-main">
                <div class="mb-7">
                  <div class="font-weight-medium mb-2">K9 系列</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </swiper>
  </div>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/css'

import 'swiper/css/pagination'
import 'swiper/css/navigation'

// import required modules
import { Pagination, Navigation } from 'swiper'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    return {
      modules: [Pagination, Navigation],
      indexGoodsVideopic: require('@/assets/upload/首页轮播1.webp'),
      indexBannerPage: [
        { id: 1, img: require('@/assets/upload/首页轮播1.webp') },
        { id: 2, img: require('@/assets/upload/首页轮播2.webp') },
        { id: 3, img: require('@/assets/upload/首页轮播3.webp') },
        { id: 4, img: require('@/assets/upload/首页轮播4.webp') }
      ]
    }
  },
  computed: {
    BannerItem() {
      return require()
    }
  }
}
</script>
<style lang="scss">
/* 首页轮播样式 */
#indexBanner {
  height: 606px;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}
.swiper-button-prev {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #c5c9cd;
  left: 32%;
  --swiper-theme-color: #f2f2f7;
}
.swiper-button-next {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #c5c9cd;
  right: 16%;
  --swiper-theme-color: #f2f2f7;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px;
}
.swiper-slide a {
  display: block;
  height: 100%;
  width: 100%;
  background-size: auto 100%;
  background-position: 50%;
  background-repeat: no-repeat;
}
/* 首页导航样式 */
.d-flex {
  display: flex !important;
}
.justify-center {
  justify-content: center !important;
}
.align-center {
  align-items: center !important;
}
.app-banner-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  .container {
    text-transform: none !important;
    position: relative;
    margin-left: inherit;
    margin-right: inherit;
    .menu-wrap {
      position: relative !important;
      pointer-events: auto;
      .side-menu {
        background-color: #fff;
        border-radius: 6px;
        color: #000;
        width: 220px;
        height: 100%;
        margin: 24px 0;
        font-size: 14px;
        overflow: hidden;
        padding: 7px 0 0;
        z-index: 1000;
        pointer-events: auto;
        box-sizing: inherit;
      }
      // 导航动画
      .side-menu-scroll {
        height: 534px;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        li:hover {
          background-color: #f7f8fa;
          color: #000;
        }
        .side-menu-item {
          list-style: none;
          margin: 0;
          padding: 0 12px 0 20px;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 0.2s ease;
          color: #9f9f9f;
          cursor: pointer;
          img {
            height: 12px;
            width: 12px;
          }

          .menu-content {
            flex: 1;
            overflow: hidden;
            .text {
              .side-menu-item .menu-content .text {
                width: 100%;
                opacity: 0.85;
                width: auto;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;
              }
            }
          }
        }
      }
      // 隐藏展示导航栏位样式
      .menu-panel {
        z-index: 1000;
        width: 747px;
        height: 100%;
        position: absolute;
        overflow: hidden;
        border-radius: 6px;
        top: 0;
        left: 240px;
        background-color: #fff;
        pointer-events: auto;
        display: flex;
        padding: 28px 8px 28px 22px;
        box-sizing: inherit;
        text-transform: none !important;
        word-break: break-all;
        background-repeat: no-repeat;
        box-sizing: inherit !important;
        //margin: 24px 0;
        .menu-panel-main {
          padding-left: 10px;
          width: 100%;
          height: 100%;
          overflow-y: auto;
          -ms-scroll-chaining: none;
          overscroll-behavior: contain;
          //background-color: #fff;
        }
        .font-weight-medium {
          margin-bottom: 12px !important;
          width: auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-wrap: normal;
          font-weight: 500 !important;
        }
        .menu-btn[data-v-0675cec9]:hover {
          box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
          color: #000;
          border-radius: 4px;
          background: #fff;
          transition: all 0.15s ease-out;
          color: #666;
        }
      }
    }
  }
}
.app-card-hover:hover {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}
.mb-2 {
  margin-bottom: 8px !important;
}
.mb-4 {
  margin-bottom: 16px !important;
}
.mb-7 {
  margin-bottom: 28px !important;
  text-transform: none !important;
}
.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin: -8px;
}
.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  width: 100%;
  padding: 8px;
}
.align-center {
  align-items: center !important;
}
.d-flex {
  display: flex !important;
}
</style>
